<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title"></h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">自动生成页面</a>
          <a><cite></cite></a>
        </span>
    </div>


    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：
            <input id="sysBwIp-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="sysBwIp-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="sysBwIp-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="bwip-table" lay-filter="bwip-table"></table>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="sysBwIp-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="sysBwIp-model">
    <form id="sysBwIp-form" lay-filter="sysBwIp-form" class="layui-form model-form">
        <input name="id" type="hidden"/>
        
        <div class="layui-form-item">
            <label class="layui-form-label">IP</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入IP" type="text" class="layui-input" maxlength="20"
                       lay-verify="required" required />
            </div>
        </div>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
            <button class="layui-btn" lay-filter="sysBwIp-form-submit" lay-submit>保存</button>
        </div>
    </form>
</script>


<script>
    layui.use(['form', 'table', 'util', 'config', 'admin'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;

        //渲染表格
        table.render({
            elem: '#bwip-table',
            url: config.base_server + 'api-tools/sysbwip/list',
            where: {
                access_token: config.getToken().access_token
            },
            page: true,
            cols: [[
                {type: 'numbers'},
                {field: 'id', sort: true, title: 'id',width: 80},
                {field: 'ip', sort: true, title: 'IP'},
                
                {templet: '#sysBwIp-state', width: 120, align: 'center', title: '操作'}
            ]]
        });

    });
    
    // 工具条点击事件
    table.on('tool(bwip-table)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'edit') { // 修改
            showEditModel(data);
        } else if (layEvent === 'del') { // 重置密码
            layer.confirm('确定删除此标签吗？', function () {
                layer.load(2);

                admin.req('api-tools/sysbwip/'+obj.data.id, {  }, function (data) {
                    layer.closeAll('loading');
                    if (data.resp_code == 0) {
                        layer.msg(data.resp_msg, {icon: 1, time: 500});
                        table.reload('bwip-table', {});
                    } else {
                        layer.msg(data.resp_msg, {icon: 2, time: 500});
                    }
                }, 'DELETE');

            });
        }
    }); 
    
    // 添加按钮点击事件
    $('#sysBwIp-btn-add').click(function () {
        showEditModel();
    });
    
    // 显示编辑弹窗
    var showEditModel = function (data) {
        layer.open({
            type: 1,
            title: data ? '修改功能' : '添加功能',
            area: '450px',
            offset: '120px',
            content: $('#sysBwIp-model').html(),
            success: function () {
                $('#sysBwIp-form')[0].reset();
                $('#sysBwIp-form').attr('method', 'POST');
                if (data) {
                    form.val('sysBwIp-form', data);
                    $('#sysBwIp-form').attr('method', 'POST');
                }
            }
        });
    };
    
    // 表单提交事件
    form.on('submit(sysBwIp-form-submit)', function (data) {
        layer.load(2);
        admin.req('api-tools/sysbwip/save', JSON.stringify(data.field), function (data) {
            layer.closeAll('loading');
            console.log(data);
            if (data.resp_code == 0) {
                layer.msg(data.resp_msg, {icon: 1, time: 500});
                table.reload('bwip-table');
                layer.closeAll('page');
            } else {
                layer.msg(data.resp_msg, {icon: 2, time: 500});
            }
        }, $('#sysBwIp-form').attr('method'));
        return false;
    });
    
    // 搜索按钮点击事件
    $('#sysBwIp-btn-search').click(function () {
        var key = $('#sysBwIp-edit-search').val();
        table.reload('bwip-table', {where: {searchKey: key}});
    });
    
</script>